<template>
    <view @tap="__e" class="mask-c data-v-2371eb5a" :data-event-opts="[['tap', [['close', ['$event']]]]]">
        <view @tap.stop.prevent="__e" :class="['mask-content', 'data-v-2371eb5a', isShowHeaderTab ? 'with-header' : '']" :data-event-opts="[['tap', [['', ['$event']]]]]">
            <view @tap="__e" class="close-btn data-v-2371eb5a" :data-event-opts="[['tap', [['close', ['$event']]]]]">关闭详情</view>
            <view class="header-tabs data-v-2371eb5a" v-if="isShowHeaderTab">
                <view
                    @tap="__e"
                    :class="['tab-item', 'data-v-2371eb5a', current == 0 ? 'active' : '']"
                    :data-current="0"
                    :data-event-opts="[['tap', [['currentChange', ['$event']]]]]"
                >
                    <text class="text data-v-2371eb5a">{{ '商品列表(' + $root.g0 + ')' }}</text>
                </view>
                <view
                    @tap="__e"
                    :class="['tab-item', 'data-v-2371eb5a', current == 1 ? 'active' : '']"
                    :data-current="1"
                    :data-event-opts="[['tap', [['currentChange', ['$event']]]]]"
                >
                    <text class="text data-v-2371eb5a">商品详情</text>
                </view>
            </view>
            <view class="swiper-wrapper-292 data-v-2371eb5a">
                <swiper @change="__e" class="swiper-292 data-v-2371eb5a" :current="current" :data-event-opts="[['change', [['currentChange2', ['$event']]]]]">
                    <swiper-item class="data-v-2371eb5a" v-if="isShowSkuList">
                        <scroll-view class="scroll-view data-v-2371eb5a" :scrollY="true">
                            <view class="sku-list-30192 data-v-2371eb5a">
                                <view class="tab-item data-v-2371eb5a">
                                    <text class="text data-v-2371eb5a">赏品详情</text>
                                </view>
                                <view class="item-3452 data-v-2371eb5a" v-for="(item, index) in skuList" :key="index">
                                    <view class="hidden-sku-text data-v-2371eb5a" v-if="item.is_hidden_sku">隐藏款</view>

                                    <image
                                        @tap="__e"
                                        class="thumb data-v-2371eb5a"
                                        :data-event-opts="[['tap', [['previewSkuThumb', [index]]]]]"
                                        mode="aspectFill"
                                        :src="item.thumb + '?x-oss-process=image/resize,w_300'"
                                    ></image>

                                    <view class="right data-v-2371eb5a">
                                        <view class="title-201 data-v-2371eb5a" style="color: #ffffff">{{ '' + item.title + '' }}</view>
                                        <view :class="['shang-title', 'data-v-2371eb5a', item.shang_type == 1 ? 'gift' : '']" v-if="item.shang_title">
                                            <label class="_span data-v-2371eb5a">{{ item.shang_title }}</label>
                                        </view>
                                        <view class="bottom-9234 data-v-2371eb5a">
                                            <view class="price data-v-2371eb5a">
                                                <price-display
                                                    @__l="__l"
                                                    class="data-v-2371eb5a"
                                                    :info="item"
                                                    prefix="display_"
                                                    :vueId="'84eda3e8-1-' + index"
                                                    v-if="item.display_money_price || item.display_score_price"
                                                ></price-display>
                                                <price-display @__l="__l" class="data-v-2371eb5a" :info="item" :vueId="'84eda3e8-2-' + index" v-else></price-display>
                                            </view>
                                            <text class="sale data-v-2371eb5a" v-if="item.stock != null">{{ '剩余' + (item.stock || 0) + '件' }}</text>
                                            <text class="percent data-v-2371eb5a" v-if="item.shang_type === 1">只赠不售</text>
                                            <block v-else>
                                                <text class="percent data-v-2371eb5a" v-if="item.odds != null">{{ '概率' + item.odds + '%' }}</text>
                                            </block>
                                        </view>
                                    </view>
                                </view>
                            </view>
                            <view class="data-v-2371eb5a" style="height: 220rpx"></view>
                        </scroll-view>
                    </swiper-item>
                    <swiper-item class="data-v-2371eb5a" v-if="isShowDetail">
                        <scroll-view class="scroll-view data-v-2371eb5a" :scrollY="true">
                            <image class="detail-image data-v-2371eb5a" mode="widthFix" :src="item" v-for="(item, index) in detailImageList" :key="index"></image>
                            <view class="data-v-2371eb5a" style="height: 220rpx"></view>
                        </scroll-view>
                    </swiper-item>
                </swiper>
            </view>
        </view>
    </view>
</template>

<script>
import priceDisplay from '@/components/PriceDisplay/PriceDisplay';
import tabBar from '@/components/TabBar/tabBar';
(global.webpackJsonp = global.webpackJsonp || []).push([
    ['components/BoxSkuPopup/BoxSkuPopup'],
    {
        '3fac': function (t, n, e) {
            'use strict';

            e.d(n, 'b', function () {
                return o;
            });
            e.d(n, 'c', function () {
                return i;
            });
            e.d(n, 'a', function () {
                return u;
            });
            var u = {
                PriceDisplay: function () {
                    return e.e('components/PriceDisplay/PriceDisplay').then(e.bind(null, '6b05'));
                }
            };
            var o = function () {
                this.$createElement;
                var t = (this._self._c, this.isShowHeaderTab ? this.skuList.length : null);
                this.setData(
                    Object.assign(
                        {},
                        {
                            $root: {
                                g0: t
                            }
                        }
                    )
                );
            };
            var i = [];
        },
        '62d0': function (t, n, e) {
            'use strict';

            (function (t) {
                Object.defineProperty(n, '__esModule', {
                    value: true
                });
                n.default = void 0;
                var e = {
                    components: {},
                    data: function () {
                        return {
                            current: 0
                        };
                    },
                    props: {
                        skuList: {
                            type: Array
                        },
                        detailImageList: {
                            type: Array
                        },
                        setting: {}
                    },
                    computed: {
                        isShowDetail: function () {
                            return this.detailImageList && this.detailImageList.length;
                        },
                        isShowSkuList: function () {
                            return this.skuList && this.skuList.length;
                        },
                        isShowHeaderTab: function () {
                            return this.isShowDetail && this.isShowSkuList;
                        }
                    },
                    watch: {},
                    onLoad: function (t) {},
                    created: function () {},
                    methods: {
                        currentChange: function (t) {
                            var n = t.currentTarget.dataset.current;
                            this.current = n;
                        },
                        currentChange2: function (t) {
                            var n = t.detail.current;
                            this.current = n;
                        },
                        close: function () {
                            this.$emit('close');
                        },
                        previewSkuThumb: function (n) {
                            t.previewImage({
                                urls: this.skuList.map(function (t) {
                                    return t.thumb;
                                }),
                                current: n
                            });
                        }
                    },
                    onPageScroll: function (t) {}
                };
                n.default = e;
            }.call(this, e('543d').default));
        },
        '882d': function (t, n, e) {},
        '8fe4': function (t, n, e) {
            'use strict';

            var u = e('882d');
            e.n(u).a;
        },
        af83: function (t, n, e) {
            'use strict';

            e.r(n);
            var u = e('62d0');
            var o = e.n(u);
            for (var i in u) {
                if (['default'].indexOf(i) < 0) {
                    (function (t) {
                        e.d(n, t, function () {
                            return u[t];
                        });
                    })(i);
                }
            }
            n.default = o.a;
        },
        f1cb: function (t, n, e) {
            'use strict';

            e.r(n);
            var u = e('3fac');
            var o = e('af83');
            for (var i in o) {
                if (['default'].indexOf(i) < 0) {
                    (function (t) {
                        e.d(n, t, function () {
                            return o[t];
                        });
                    })(i);
                }
            }
            e('8fe4');
            var r = e('f0c5');
            var c = Object(r.a)(o.default, u.b, u.c, false, null, '2371eb5a', null, false, u.a, void 0);
            n.default = c.exports;
        }
    }
]);
(global.webpackJsonp = global.webpackJsonp || []).push([
    'components/BoxSkuPopup/BoxSkuPopup-create-component',
    {
        'components/BoxSkuPopup/BoxSkuPopup-create-component': function (t, n, e) {
            e('543d').createComponent(e('f1cb'));
        }
    },
    [['components/BoxSkuPopup/BoxSkuPopup-create-component']]
]);
</script>
<style>
@import './BoxSkuPopup.css';
</style>
